<template>
  <div>
    <Header title="修改密码" />
    <div class="container">
      <div class="box">
        <van-field
          v-model="oldPassword"
          name="原密码"
          label="原密码"
          type="password"
          placeholder="请填原密码"
          :rules="[{ required: true, message: '请输入原密码' }]"
        />
        <van-field
          v-model="newPassword"
          name="新密码"
          type="password"
          label="新密码"
          placeholder="请填写新密码"
          :rules="[{ required: true, message: '请输入新密码' }]"
        />
        <van-field
          v-model="confirmPassword"
          type="password"
          name="确认新密码"
          label="确认新密码"
          placeholder="请填写确认新密码"
          :rules="[{ required: true, message: '请再次输入新密码' }]"
        />
      </div>
      <div class="bottom">
        <van-button @click="postAction" type="primary" size="large" color="#3A73F6">保存</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../../components/Header";

export default {
  data() {
    return {
      oldPassword: "",
      newPassword: "",
      confirmPassword: ""
    };
  },
  components: {
    Header: Header
  }
};
</script>
<style scoped>
.box {
  margin-top: 30px;
}
.bottom {
  margin: 434px 30px 0 30px;
}
</style>